import React, { Component } from 'react';
import { Navbar, NavItem, Nav, Image, Modal } from 'react-bootstrap';
import { GConfig } from '../GConfig';
import {LoginForm} from './loginForm'
import thum from '../assets/kisuka.jpg'

class Header extends Component {
    render() {
        console.log(GConfig.getIns().isLogin);
        return (
            <Navbar inverse collapseOnSelect>
                <Navbar.Header>
                    <Navbar.Brand>
                        <a href="#">Coder-Dictionary</a>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <NavItem eventKey={1} href="#">Link</NavItem>
                        <NavItem eventKey={2} href="#">Link</NavItem>
                    </Nav>
                    <LoginStatus />
                </Navbar.Collapse>
            </Navbar>
        );
    };
}
class LoginStatus extends Component {
    constructor(pros) {
        super(pros);
        this.state = {
            showModal: false
        }
    }
    closeModal() {
        console.log('close Modal')
        this.setState({ showModal: false })
    }
    render() {
        if (GConfig.getIns().isLogin == false) {
            return (
                <div>
                    <Modal show={this.state.showModal} onHide={() => this.closeModal()}>
                        <Modal.Header closeButton>
                            <Modal.Title center>登陆/注册</Modal.Title>
                        </Modal.Header>

                        <Modal.Body>
                            <LoginForm/>
                        </Modal.Body>
                    </Modal>

                    <Nav pullRight>
                        <NavItem eventKey={1} onClick={(e) => {
                            console.log("登陆")
                            this.setState({ showModal: true });
                        }}>登陆/注册</NavItem>
                    </Nav>
                </div>
            );
        } else {
            return (
                <Nav pullRight>
                    <NavItem eventKey={1} href="#">{GConfig.getIns().userName}</NavItem>
                    <Image rounded width={32} src={thum} />
                </Nav>
            );

        }

    }
}
export  {Header,LoginStatus};